<template>
  <!-- 联系我们 -->
  <div class="main">
    <h2 class="title">
      {{ $tc('contact.title') }}
      <el-divider />
    </h2>
    <div class="content">
      <div class="about">
        <div class="information">
          <!-- 业务联系 -->
          <div class="contact business">
            <h3 v-t="{ path: 'contact.business.title' }"></h3>
            <p>{{ $tc('contact.business.domestic') }}:<i>（86）0574 86748502</i></p>
            <p>{{ $tc('contact.business.international')}}:<i>（86）0574 86764358</i></p>
          </div>
          <!-- 技术联系 -->
          <div class="contact technology">
            <h3 v-t="{ path: 'contact.technology.title' }"></h3>
            <p>{{ $tc('contact.technology.Daxie') }}:<i>（86）0574 86748503</i></p>
            <p>{{ $tc('contact.technology.Beilun') }}:<i>（86）0574 86762152</i></p>
          </div>
        </div>
        <!-- 地图 -->
        <div class="amap">
          <el-skeleton style="width: 100%" animated v-if="isShow">
            <template #template>
              <el-skeleton-item variant="image" style="width: 100%; height: 560px" />
            </template>
          </el-skeleton>
          <div id="map"></div>
        </div>
      </div>
      <!-- 位置信息 -->
      <div class="location">
        <div>
          <img src="../assets/images/contact/公司地址.png" alt="公司地址" />
          <span v-t="{ path: 'contact.location' }"></span>
        </div>
        <div>
          <img src="../assets/images/contact/公司电话.png" alt="公司电话" />
          <span>（86）0574 86765788</span>
        </div>
        <div>
          <img src="../assets/images/contact/传真.png" alt="传真" />
          <span>（86）0574 86763198</span>
        </div>
        <div>
          <img src="../assets/images/contact/邮箱.png" alt="邮箱" />
          <span>tony@tzmc.com</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, shallowRef } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  name: 'Contact',
  setup() {
    const map = shallowRef(null);
    let isShow = ref(true);

    onMounted(() => {
      setTimeout(() => {
        initMap();
      }, 10)
    });

    function initMap() {
      AMapLoader.load({
        key: "e6cf30fd79d7b556ee881ddd0281e8d0", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          let map = new AMap.Map("map", {
            zoom: 5, //设置地图显示的缩放级别 ZoomLevel
            keyboardEnable: true, // 键盘控制放大缩小移动旋转
            touchZoom: true, // 手势控制
            center: [121.939253, 29.905078], //中心点坐标
            viewMode: "3D", //使用3D视图
          });
          // map.setDefaultCursor("pointer");
          // 创建一个 Marker 实例
          let markerPoint = new AMap.Marker({
            position: [121.939253, 29.905078], // 基点坐标
            title: '天正模具',
            draggable: false, //点标记对象是否可拖拽移动
            offset: new AMap.Pixel(0, 0), // 设置点标记偏移量
          });
          map.add(markerPoint); // 地图添加标记
          //信息窗体
          let infoWindow = new AMap.InfoWindow({
            anchor: "top-left", //信息窗体的三角所在位置
            content: "天正模具", //写入窗体中显示的信息
            offset: new AMap.Pixel(0, 0),
          });
          infoWindow.open(map, [121.939253, 29.905078]); //填写想要窗体信息指示的坐标
          isShow.value = false;
        })
        .catch((e) => {
          console.log(e); //加载错误提示
        });
      console.log(AMapLoader);
    }

    return {
      map,
      isShow,
      initMap,
    };
  },
};
</script>
<style lang="less" scoped>
@import url('../assets/css/contact.less');
</style>